<template>
  <div class="dashboard">
    <div class="data-view data-box">
      <div class="filter">
        <SelectStrategy v-model:id="form.strategyId" />
        <SelectPlatform v-model:id="form.platformId" />
        <SelectCategory v-model:id="form.categoryId" />
      </div>
      <TotalData
        :list="holdList"
        :days="recordDays"
        v-model:hold-value="holdValue"
        @range="setRangeBy"
      />
      <HoldRange :type="rangeBy" :list="rangedList" class="hold-range" />
    </div>
    <div class="trend data-box">
      <div class="title">持仓趋势图</div>
      <div class="trend-chart">
        <AsyncTrendChart
          v-if="filteredHistoryList?.length"
          :history-list="filteredHistoryList"
          :hold-list="holdList"
          :total="holdValue"
        />
        <div v-else class="empty">暂无数据，快去添加持仓吧!</div>
      </div>
    </div>
    <div class="right data-box">
      <div class="title-area">
        <div class="title">持仓分布情况</div>
        <div class="index-db">
          <el-button type="primary" size="small" @click="exportIndexDB">导出数据</el-button>
          <el-upload :show-file-list="false" :auto-upload="false" :on-change="handleImportData"
            ><el-button type="danger" size="small" class="import-btn"
              >导入数据</el-button
            ></el-upload
          >
        </div>
      </div>

      <TotalChart v-if="holdList?.length" :total="holdValue" :list="holdList" />
      <div v-else class="empty">暂无数据，快去添加持仓吧!</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TotalData from './TotalData.vue'
import HoldRange from './HoldRange.vue'

import SelectPlatform from '@/components/SelectPlatform/index.vue'
import SelectStrategy from '@/components/SelectStrategy/index.vue'
import SelectCategory from '@/components/SelectCategory/index.vue'

import { historyList } from '@/indexDB/initHistory'
import { useRange } from './useRange'
import { useHold } from '@/views/hold/useHold'

import { computed, ref, defineAsyncComponent } from 'vue'
import { exportIndexDB, importIndexDB } from '@/utils/indexDB'
import dayjs from 'dayjs'

const AsyncTrendChart = defineAsyncComponent(() => import('./TrendChart.vue'))
const TotalChart = defineAsyncComponent(() => import('./TotalChart.vue'))
const { holdList, form } = useHold()

const filteredHistoryList = computed(() => {
  const tempArr = historyList.value.filter((history) => {
    const { holdId } = history

    return holdList.value.find((hold) => hold.id === holdId)
  })
  return tempArr
})

const recordDays = computed(() => {
  const timeList = holdList.value.map((item) => +item.createTime)
  if (!timeList.length) {
    timeList.push(new Date().getTime())
  }
  const earliest = Math.min(...timeList)
  const earliestTime = dayjs(earliest).format('YYYY-MM-DD hh:mm:ss')
  return dayjs().diff(earliestTime, 'day')
})

const holdValue = ref(0)

const { rangeBy, setRangeBy, rangedList } = useRange(holdList)

const handleImportData = (file: any) => {
  // console.log(res, '--res')
  importIndexDB(file.raw)
}
</script>

<style lang="scss" scoped>
.dashboard {
  margin: 10px;
  height: 95%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.5fr 2.5fr;
  grid-template-rows: 1fr 2fr;
  grid-gap: 20px;
  border-radius: 10px;
  .data-view {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    .filter {
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 10px;
    }
  }
  .trend {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    .trend-chart {
      flex: 1;
    }
  }
  .right {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    .title-area {
      display: flex;
      justify-content: space-between;
      .index-db {
        display: flex;
        align-items: center;
        .import-btn {
          margin-left: 10px;
        }
      }
    }
  }

  .empty {
    margin-top: 20px;
  }

  .data-box {
    padding: 30px;
    border-radius: 10px;
    background: #fff;
  }
  .title {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 700;
  }
}
:deep(.el-input__wrapper) {
  flex-grow: 0;
}

.hold-range {
  display: none;
  @media (min-height: 770px) {
    display: block;
  }
}
</style>
